<template>
  <div id="detail">
    <detail-nav-bar
      class="detailnav"
      @titleclick="titleclick"
      ref="navclick"
    ></detail-nav-bar>
    <scroll
      class="content"
      :probe-type="3"
      :pull-up-load="true"
      ref="scroll"
      @scroll="contentscroll"
    >
      <detail-swiper :categories="topimages"></detail-swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-goods-info
        :detailInfo="detailInfo"
        @imageLoad="imageLoad"
      ></detail-goods-info>
      <detail-param-info
        :paramInfo="paramInfo"
        ref="params"
      ></detail-param-info>
      <detail-comment-info
        :commentInfo="commentinfo"
        ref="comment"
      ></detail-comment-info>
      <goods-list :goods="recommends" ref="recommends"></goods-list>
    </scroll>
    <detail-bottom-bar @addclick="addclick"></detail-bottom-bar>
    <backTop @click.native="backclick" v-show="isshow"></backTop>
  </div>
</template>

<script>
import DetailNavBar from "./detailcomps/detailnavbar.vue";
import DetailSwiper from "./detailcomps/detailswiper.vue";
import DetailBaseInfo from "./detailcomps/detailbaseinfo.vue";
import DetailShopInfo from "./detailcomps/detailshoplnfo.vue";
import DetailGoodsInfo from "./detailcomps/detailgoodsinfo.vue";
import DetailParamInfo from "./detailcomps/detailparaminfo.vue";
import DetailCommentInfo from "./detailcomps/detailcommentinfo.vue";
import DetailBottomBar from "./detailcomps/detailbottombar.vue";

import scroll from "components/common/scroll/scroll.vue";
import GoodsList from "components/content/goods/goodslist.vue";
import BackTop from "components/content/backtop/backtop.vue";

import { debounce } from "common/utils";
import {
  getdetail,
  Goods,
  Shop,
  GoodsParam,
  getRecommend,
} from "network/detail";
export default {
  name: "detail",
  data() {
    return {
      iid: null,
      topimages: [],
      goods: {},
      shop: {},
      detailInfo: {},
      paramInfo: {},
      commentinfo: {},
      recommends: [],
      themetops: [],
      as: null,
      isshow: false,
    };
  },
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    DetailBottomBar,
    BackTop,
    GoodsList,
    scroll,
  },
  props: {},
  created() {
    //保存传入的数据
    this.iid = this.$route.params.iid;
    //根据iid请求详情数据
    getdetail(this.iid).then((res) => {
      const data = res.data.result;
      // console.log(res);
      this.topimages = data.itemInfo.topImages;
      //评论信息
      if (data.rate.cRate !== 0) {
        this.commentinfo = data.rate.list[0];
      }
      //获取商品信息
      this.goods = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );
      //创建店铺信息对象
      this.shop = new Shop(data.shopInfo);
      //保存商品详情数据
      this.detailInfo = data.detailInfo;
      //获取参数信息
      this.paramInfo = new GoodsParam(
        data.itemParams.info,
        data.itemParams.rule
      );
    });
    //求推荐数据
    getRecommend().then((res) => {
      this.recommends = res.data.data.list;
    });
    this.as = debounce(() => {
      this.themetops = [];
      this.themetops.push(0);
      this.themetops.push(this.$refs.params.$el.offsetTop);
      this.themetops.push(this.$refs.comment.$el.offsetTop);
      this.themetops.push(this.$refs.recommends.$el.offsetTop);
    }, 100);
  },
  mounted() {},
  updatad() {},
  methods: {
    imageLoad() {
      this.$refs.scroll.refresh();
      this.as();
    },
    titleclick(index) {
      // console.log(this.$refs.scroll.scrollTop);
      this.$refs.scroll.scrollTo(0, -this.themetops[index], 0);
    },
    contentscroll(position) {
      //获取y
      const positiony = -position.y;

      if (positiony > this.themetops[0] && positiony < this.themetops[1]) {
        this.$refs.navclick.currentindex = 0;
      } else if (
        positiony > this.themetops[1] &&
        positiony < this.themetops[2]
      ) {
        this.$refs.navclick.currentindex = 1;
      } else if (
        positiony > this.themetops[2] &&
        positiony < this.themetops[3]
      ) {
        this.$refs.navclick.currentindex = 2;
      } else if (positiony > this.themetops[3]) {
        this.$refs.navclick.currentindex = 3;
      }
      //是否显示回到顶部
      this.isshow = -position.y > 800;
    },
    backclick() {
      //可以通过$refs.backtop来获取到scroll对象 在调用scrollTo方法
      this.$refs.scroll.scroll.scrollTo(0, 0, 500);
    },
    addclick() {
      //获取购物车需要展示的信息
      const product = {};
      product.image = this.topimages[0];
      product.title = this.goods.title;
      product.desc = this.goods.desc;
      product.price = this.goods.realPrice;
      product.iid = this.iid;
      //添加到vuexdispatch
      // this.$store.commit("addcart", product);
      this.$store.dispatch("addcart", product);
    },
  },
};
</script>

<style scoped>
#detail {
  position: relative;
  z-index: 9;
  background-color: #fff;
  height: 100vh;
}
.content {
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
.detailnav {
  /* position: relative; */
  /* z-index: 9; */
  background-color: #fff;
}
</style>